<template>
  <div>
    <!-- navbar导航栏 -->
    <van-nav-bar left-arrow>
      <template #title>
        <van-search
          v-model="value"
          placeholder="请输入小区或地址"
          @search="onSearch"
          style="font-size: 10px"
          color="#9c9fa1"
        >
          <template #left>
            <div class="area" @click="areaFn" style="color: #666666">
              <span style="font-size: 13px">上海</span>
              <van-icon name="arrow-down" color="#666666"></van-icon>
            </div>
          </template>
        </van-search>
      </template>
      <template #right>
        <van-icon name="map-marked" size="25" />
      </template>
    </van-nav-bar>
    <!-- 四个筛选下拉栏 -->
    <van-dropdown-menu active-color="#5fb67f">
      <van-dropdown-item title="区域" ref="item" @click="getHouseList">
        <!-- 滑动选择区域 -->
        <van-picker
          show-toolbar
          toolbar-position="bottom"
          :columns="columns1"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="item">
        <!-- 滑动选择方式 -->
        <van-picker
          show-toolbar
          toolbar-position="bottom"
          :columns="columns2"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <van-dropdown-item title="租金" ref="item">
        <!-- 滑动选择租金 -->
        <van-picker
          show-toolbar
          toolbar-position="bottom"
          :columns="columns3"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item">
        <!-- 滑动选择地区 -->
        <van-picker
          show-toolbar
          toolbar-position="bottom"
          :columns="columns4"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 房源列表 -->
    <van-grid direction="horizontal" :column-num="1" :center="false">
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
        <div class="houseinfo">
          <h5>房屋标题</h5>
          <div class="have">
            <span>四室</span>
            <span>111</span>
          </div>
          <div class="youdian">近地铁</div>
          <div class="price">1111 <span>/月</span></div>
        </div>
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
        <div class="houseinfo">
          <h5>房屋标题</h5>
          <div class="have">
            <span>四室</span>
            <span>111</span>
          </div>
          <div class="youdian">近地铁</div>
          <div class="price">1111 <span>/月</span></div>
        </div>
      </van-grid-item>

    </van-grid>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { houseListAPI } from '../../api'
export default {
  data () {
    return {
      value: '',
      columns1: [
        // 第一列
        {
          text: '区域',
          children: [
            {
              text: '杭州',
              children: [{ text: '西湖区' }, { text: '余杭区' }]
            }
          ]
        },
        // 第二列
        {
          text: '地铁',
          children: [
            {
              text: '1号线',
              children: [{ text: '不限' }, { text: '徐家汇' }]
            }
          ]
        }
      ],
      columns2: ['不限', '整租', '合租'],
      columns3: [
        '不限',
        '1000及以下',
        '1000-2000',
        '2000-3000',
        '3000-4000',
        '4000-5000',
        '5000-6000',
        '6000-7000',
        '7000以上'
      ],
      columns4: []
    }
  },
  methods: {
    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onChange (picker, value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel () {
      Toast('取消')
    },
    async getHouseList () {
      const res = await houseListAPI({
        id: this.id
      })
      console.log(res)
    },
    created () {
      this.getHouseList()
    },
    areaFn () {
      this.$router.push('/city')
    },
    onSearch () {}
  }
}
</script>

<style lang="less" scoped>
.area {
  border-right: 1px solid #9c9fa1;
  padding-right: 10px;
}
.van-icon.van-icon-search {
  color: #9c9fa1;
}
.van-search {
  width: 320px;
  height: 34px;
  margin-left: 4px;
  color: #9c9fa1;
  border-radius: 3px;
}

i.van-icon.van-icon-search {
  color: #9c9fa1;
}
/deep/ .van-icon-search:before {
  color: #9c9fa1;
}
.van-image {
  width: 106px;
  height: 80px;
}
.houseinfo {
  padding-left: 10px;
  h5 {
    font-size: 15px;
    margin: 5px 0;
  }
}
.have {
  font-size: 12px;
  color: #afb2b3;
}
.youdian {
  margin: 5px 0;
  width: 45px;
  height: 15px;
  font-size: 12px;
  border-radius: 3px;
  text-align: center;
  line-height: 15px;
  color: #39becd;
  background: #e1f5f8;
}
.price {
  font-size: 16px;
  color: #fa5741;
  font-weight: 600;
  span {
    font-size: 12px;
  }
}
</style>>
